css-selector-parser

What is css-selector-parser?

The css-selector-parser npm package is a utility for parsing CSS selectors into an abstract syntax tree (AST). This can be useful for various applications such as CSS preprocessing, validation, and transformation.

What are css-selector-parser's main functionalities?

Parsing CSS Selectors

This feature allows you to parse a CSS selector string into an abstract syntax tree (AST). The example code demonstrates how to parse a complex CSS selector and output the resulting AST.

const { CssSelectorParser } = require('css-selector-parser');
const parser = new CssSelectorParser();
parser.registerNestingOperators('>', '+', '~');
parser.registerAttrEqualityMods('^', '$', '*', '~');
const ast = parser.parse('div.class[attr^="value"] > p');
console.log(JSON.stringify(ast, null, 2));

Customizing Parser Behavior

This feature allows you to customize the behavior of the parser by registering different nesting operators and attribute equality modifiers. The example code shows how to enable substitutes and register custom operators.

const { CssSelectorParser } = require('css-selector-parser');
const parser = new CssSelectorParser();
parser.registerNestingOperators('>', '+', '~');
parser.registerAttrEqualityMods('^', '$', '*', '~');
parser.enableSubstitutes();
const ast = parser.parse('div.class[attr^="value"] > p');
console.log(JSON.stringify(ast, null, 2));

Serializing AST to CSS Selector

This feature allows you to serialize an abstract syntax tree (AST) back into a CSS selector string. The example code demonstrates how to parse a CSS selector into an AST and then render it back to a string.

const { CssSelectorParser } = require('css-selector-parser');
const parser = new CssSelectorParser();
parser.registerNestingOperators('>', '+', '~');
parser.registerAttrEqualityMods('^', '$', '*', '~');
const ast = parser.parse('div.class[attr^="value"] > p');
const selector = parser.render(ast);
console.log(selector);

Other packages similar to css-selector-parser

postcss-selector-parser

PostCSS Selector Parser is a tool for parsing, transforming, and stringifying CSS selectors. It is more feature-rich and integrates well with the PostCSS ecosystem, making it suitable for more complex CSS processing tasks.

css-what

css-what is a CSS selector parser that is part of the Cheerio library. It is designed to be fast and efficient, making it a good choice for applications that require high performance.

csstree

CSSTree is a tool for parsing, walking, and generating CSS. It provides a comprehensive set of features for working with CSS, including a detailed AST and various utilities for manipulating CSS. It is more comprehensive compared to css-selector-parser.

README

node-css-selector-parser

Fast and low memory CSS selector parser.

Parses CSS selector into object-model.

Installation

npm install css-selector-parser

Usage

var CssSelectorParser = require('css-selector-parser').CssSelectorParser,

    parser = new CssSelectorParser();

parser.registerSelectorPseudos('has');
parser.registerNestingOperators('>', '+', '~');
parser.registerAttrEqualityMods('^', '$', '*', '~');
parser.enableSubstitutes();

var util = require('util');

console.log(util.inspect(parser.parse('a[href^=/], .container:has(nav) > a[href]:lt($var)'), false, null));

Produces:

{ type: 'selectors',
  selectors:
   [ { type: 'ruleSet',
       rule:
        { tagName: 'a',
          attrs: [ { name: 'href', operator: '^=', valueType: 'string', value: '/' } ],
          type: 'rule' } },
     { type: 'ruleSet',
       rule:
        { classNames: [ 'container' ],
          pseudos:
           [ { name: 'has',
               valueType: 'selector',
               value: { type: 'ruleSet', rule: { tagName: 'nav', type: 'rule' } } } ],
          type: 'rule',
          rule:
           { tagName: 'a',
             attrs: [ { name: 'href' } ],
             pseudos: [ { name: 'lt', valueType: 'substitute', value: 'var' } ],
             nestingOperator: '>',
             type: 'rule' } } } ] }

Token description

type may be one of:

• selectors — list of selectors, token contains selectors array of ruleSet tokens (based on "," operator).
• ruleSet — selector, token contains rule field with rule-type object.
• rule — single rule.

Fields for rule type.

• tagName — tag name for the rule (e.g. "div"), may be '*'.
• classNames — list of CSS class names for the rule.
• attrs — list of attribute rules; rule may contain fields:
  • name — attribute name, required field.
  • valueType — type of comparison value ("string" or "substitute").
  • operator — attribute value comparison operator.
  • value — comparison attribute value.
• pseudos — list of pseudo class rules; rule may contain fields:
  • name — pseudo name, required field.
  • valueType — argument type ("string", "selector" or "substitute").
  • value — pseudo argument.
• nestingOperator — the operator used to nest this rule (e.g. in selector "tag1 > tag2", tag2 will have nestingOperator=">")
• rule — nested rule.